<template>
  <div>
    <a-button type="primary" @click="showModal">注册用户</a-button>
    <a-modal v-model="visible" title="创建用户" @ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" @click="handleOk">
          立即注册
        </a-button>
      </template>
      <a-form layout="vertical" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="用户名">
          <a-input placeholder="请输入用户名" v-model="from.userName"/>
        </a-form-item>
        <a-form-item label="密码">
          <a-input placeholder="请输入密码" v-model="from.passWord"/>
        </a-form-item>
        <a-form-item label="手机号">
          <a-input placeholder="请输入手机号" v-model="from.mobilePhone"/>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input placeholder="请输入邮箱" v-model="from.email"/>
        </a-form-item>
        <a-form-item label="用户头像">
          
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      from:{

      }
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      let data={
        userName: this.from.userName,
        passWord: this.from.passWord,
        mobilePhone: this.from.mobilePhone,
        email: this.from.email,
        userImage: "",
        syUserRoleList:[]
      }
      this.$axios.post("/login/service/register", data).then(res => {
        if (res.code == 200) {
         this.$message.success(res.msg);
        }
      });
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
  }
};
</script>
<style lang="scss" scoped>
</style>